<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <style>
        body {
            text-align: center;
            background: linear-gradient(to bottom, #f8f9fa, #e9ecef); /* 添加页面背景色渐变效果 */
        }

        table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #3399ff;
    }


    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }


        tr:nth-child(even) {
            background-color: #e6f2ff;
        }

        tr:hover {
            background-color: #b3d9ff;
        }

        a {
            display: inline-block;
            text-decoration: none;
            color: #007bff;
            padding: 10px;
            border: 1px solid #007bff;
            border-radius: 5px;
            transition: all 0.3s ease;
            white-space: nowrap;
            /* 防止内容过长时换行 */
        }

        a:hover {
            background-color: #007bff;
            color: white;
        }

       .del {
            display: inline-block;
            text-decoration: none;
            color: #FF4500;
            padding: 10px;
            border: 1px solid #FF4500;
            border-radius: 5px;
            transition: all 0.3s ease;
            white-space: nowrap;
            /* 防止内容过长时换行 */
        }

       .del:hover {
            background-color: #FF4500;
            color: white;
        }

       .search-container {
            text-align: center;
            margin-top: 20px;
        }

       .search-input {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        /* 导航栏样式 */
        nav {
            background-color: #2478cb;
            padding: 10px 0;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        nav li {
            margin: 0 15px;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #007bff;
        }

        /* 页脚样式 */
        footer {
            background-color: #f8f9fa;
            text-align: center;
            padding: 20px;
            margin-top: 20px;
            border-top: 1px solid #ccc;
        }

    
    </style>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/book">图书管理</a></li>
            <li><a href="https://www.sxau.edu.cn/">山西农业大学</a></li>
        </ul>
    </nav>

    <h1 style="text-align: center">用户列表</h1>

    <!-- 表格标题说明 -->
    <p style="font-size: 18px; margin-bottom: 10px;">以下是本网站的用户信息列表，您可以进行相应操作。</p>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>别名</th>
                <th>删除</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
            <%data.forEach(function (item, index) { %>
            <tr>
                <td><%= item.id %></td>
                <td><%= item.username %></td>
                <td><%= item.nikename %></td>
                <td><a class='del' href="/user/delete/<%= item.id %>">删除</a></td>
                <td><a href="/user/edit/<%= item.id %>">编辑</a></td>
            </tr>
            <% }); %>
        </tbody>
    </table>

    <!-- 底部页脚 -->
    <footer>
        <p>&copy; 版权所有,请勿照抄</p>
        <p>如有疑问，请联系：<a href="mailto:example@example.com">example@example.com</a></p>
    </footer>
</body>

</html>